<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>超级VIP - {$kx.config.sitename}</title>
    <link rel="stylesheet" href="{$kx.config.resurl}/template/kxmobileno1/css/global.css"/>
    <script src="{$kx.config.resurl}/template/kxmobileno1/js/flexible.min.js"></script>
</head>
<body>
<div class="w100">
    <div class="w100 bg-red flex-wrp flex-align-center flex-between lh100 plr15 ptb15">
        <img src="{$kx.config.resurl}/template/kxmobileno1/images/return-white2.png" class="pt-return">
        <div class="size18 color1">超级VIP</div>
        <div></div>
    </div>
    <div class="bg-red color1 pt10 pl20">
        <img src="{$userinfo.avatar}" alt="{=$userinfo.nickname?:$userinfo.name}" class="pt-avatar">
        <div class="inline-block pl10" style="position: absolute; margin-top: 7px;">
            {block method=user.isvip userid=$userinfo.id name=$isvip}
            {if $isvip}
            <h1 class="size16">尊敬的VIP会员您好</h1>
            <p class="size14">您的VIP于{$userinfo.vip_expire_time|date='Y-m-d'}日到期，请您及时续费，以便给您带来不便</p>
            {else}
            <h1 class="size16">尊敬的用户您好</h1>
            <p class="size14">您还未开通超级VIP</p>
            {/if}
        </div>
    </div>
    <div class="bg-red bold pt20 mb10">
        <div class="bg-white" style="border-radius:20px 20px 0 0;padding: 20px;">
            <h1 class="size18 color32 mb10">开通超级VIP</h1>
            <ul class="pt-vip-recharge-list">
                {section loop=$kx.config.vip.list item=$loop}
                <li data-price="{$i.index}">
                    <p class="mt10">&yen;<span class="size24">{$i.index}</span></p>
                    <span class="size14">({$loop.name})</span>
                </li>
                {/section}
            </ul>
            <p class="color62 size14 mt10 mb20">选择支付方式</p>
            <ul class="pt-pay-platform" style="margin-bottom: .5rem">
                <li class="flex-wrp flex-align-center mb20" data-platform="2">
                    <img src="{$kx.config.resurl}/template/kxmobileno1/images/wx.png" class="mr10" style="height: .22rem;width:.22rem">
                    <span class="size14 lh100 color7">微信</span>
                </li>
                <li class="flex-wrp flex-align-center active" data-platform="1">
                    <img src="{$kx.config.resurl}/template/kxmobileno1/images/alipay.png" class="mr10" style="height: .22rem;width:.22rem">
                    <span class="size14 lh100 color7">支付宝</span>
                </li>
            </ul>
            <button class="pt-login-btn color1 mt10 pt-submit" style="width:90vw;border-radius: 40px;">立即支付</button>
        </div>
    </div>
</div>

<!-- 底部版权 -->
{include file="/system/footer"}
<script src="{$kx.config.resurl}/template/kxmobileno1/js/layer/mobile/layer.js"></script>
<script>
    $('.pt-vip-recharge-list li,.pt-pay-platform li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });
    $('.pt-submit').click(function () {
        var platform = $('.pt-pay-platform .active'),price = $('.pt-vip-recharge-list .active');
        if (!price.length){
            return  layer.open({content: '请选择开通时长',skin: 'msg',time: 2});
        }
        if (!platform.length){
            return  layer.open({content: '请选择支付方式',skin: 'msg',time: 2});
        }
        if (platform.length === 1 && price.length === 1) {
            window.location.href = '{link=user.pay.unifiedOrder method=1 type=2}&type_info=' + price.data('price') + '&platform=' + platform.data('platform')
        }
    });
</script>
</body>
</html>